<template>
  <div class="event-detail-page page">
    <nav-bar title="事件详情"></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-sticky class="page-scroll" :offset-top="44">
        <van-cell
          title="上报时间"
          :value="eventData.reportTime"
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black"
        />
        <van-cell
          title="事件点位"
          :value="eventData.eventLocation"
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black"
        />
        <van-cell
          title="事件分类"
          :value="eventData.eventTypeName"
          title-class="van-cell__title_gray"
          value-class="van-cell__value_black"
        />
        <van-cell
          title="事件规模"
          :value="eventData.eventScaleName"
          title-class="van-cell__title_gray"
          value-class="van-cell__value_blue"
        />
        <van-cell title="事件描述" title-class="van-cell__title_gray" :border="false" />
        <van-field
          readonly
          v-model="eventData.eventDescription"
          rows="5"
          autosize
          type="textarea"
          placeholder="请对您要上报的内容进行具体描述……"
          :border="false"
          class="van-field__value--textarea-lightgray"
        />
        <template v-if="eventData.overTime">
          <van-cell
            title="要求时限"
            :value="eventData.overTime"
            title-class="van-cell__title_gray"
            value-class="van-cell__value_red"
          />
        </template>
        <template v-if="fileList.length">
          <van-cell title="添加图片/视频" title-class="van-cell__title_gray" :border="false" />
          <van-field class="van-field__value--upload">
            <template #input>
              <van-uploader
                name="fileList"
                v-model="fileList"
                :show-upload="false"
                :deletable="false"
                @click-preview="previewClick"
              >
                <template #preview-cover="file">
                  <template v-if="format.includes(file.url.split('.')[file.url.split('.').length - 1])">
                    <div class="van-uploader__preview-masker"></div>
                    <video-player
                      class="video-player vjs-custom-skin"
                      :playsinline="true"
                      :options="{
                        aspectRatio: '16:16',
                        preload: 'auto',
                        sources: [
                          {
                            src: file.url
                          }
                        ]
                      }"
                    ></video-player>
                  </template>
                </template>
              </van-uploader>
            </template>
          </van-field>
        </template>
      </van-sticky>
    </div>
    <!-- 视频预览 -->
    <gb-video :url="videoUrl" :show.sync="videoPopupShow"></gb-video>
    <van-uploader
      ref="arriveUpload"
      name="arriveFileList"
      v-model="arriveFileList"
      :max-size="maxSize"
      :before-read="uploadBeforeRead"
      :after-read="uploadAfterRead"
      style="display: none"
      accept="image/*"
      capture="camera"
    />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Upload from '@/mixins/upload'
import Cockpit from '@/api/cockpit'
export default {
  mixins: [Upload],
  data() {
    return {
      // 上传配置
      folder: 'event',
      maxSize: 10 * 1024 * 1024,
      // 已到达
      arriveFileList: [],
      // 处置结果
      resultCurIndex: 0,
      resultLastIndex: 0,
      resultList: [],
      resultActiveNames: [],
      // 详情
      eventData: {},
      fileList: [],
      // 详情 - 九张图片key
      uploadKeys: [
        'firstImageUrl',
        'secondImageUrl',
        'thirdImageUrl',
        'fourthImageUrl',
        'fifthImageUrl',
        'sixthImageUrl',
        'seventhImageUrl',
        'eighthImageUrl',
        'ninthImageUrl'
      ],
      // 督办详情
      superviseData: {},
      superviseRecordData: [],
      superviseReplyData: [],
      superviseRecordIndex: 0,
      superviseReplyIndex: 0,
      // 申请详情
      delayApplyData: [],
      delayApplyResultData: [],
      // 文件后缀
      accept: ['jpg', 'jpeg', 'png', 'mp4', 'avi', 'mov'],
      // 视频后缀
      format: ['mp4', 'avi', 'mov'],
      // 视频弹窗
      videoPopupShow: false,
      videoUrl: '',
      // 禁止多次点击
      buttonDisabled: false,
      // 处置/退回参数
      statusParams: {
        eventCode: '',
        eventOrigin: '',
        nextPerson: '',
        assignee: '',
        acceptance: '',
        comment: ''
      }
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  created() {
    this.statusParams.nextPerson = this.user.gridPersonCode
    this.statusParams.assignee = this.user.gridPersonCode
    this.statusParams.acceptance = '2'
    this.getDetail()
  },
  methods: {
    // 事件详情
    getDetail() {
      Cockpit.Record.detail({
        eventCode: this.$route.query.eventCode
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.eventData = { ...data }
          this.statusParams.eventCode = this.eventData.eventCode
          this.statusParams.eventOrigin = this.eventData.eventOrigin
          this.fileList = []
          for (let i = 0; i < this.uploadKeys.length; i++) {
            if (this.eventData[this.uploadKeys[i]]) {
              this.fileList.push({
                url: this.$config.ImageURl + this.eventData[this.uploadKeys[i]]
              })
            }
          }
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    uploadAfter(detail) {
      if (detail.name === 'arriveFileList') {
        this.statusParams.comment = this.arriveFileList[this.arriveFileList.length - 1].url
        this.statusChange()
      }
    }
  }
}
</script>
<style lang="less" scope>
@import '~@/assets/style/event/detail';
</style>
